<template>
	<view class="login">
		<view class="form">
			<uni-forms :modelValue="form" :rules="rules" ref='form'>
				<uni-forms-item class='phoneNumber' name="phonenumber" label="手机号" label-width="60">
					<view class="region"> </view> <input type="number" style="width: 100%;" maxlength="11"
						v-model="form.phonenumber" placeholder="请输入手机号" />

				</uni-forms-item>
				<uni-forms-item class='smsCode' name="smsCode" label="验证码" label-width="60">
					<input type="number" maxlength="4" style="width: 100%;" v-model="form.smsCode"
						placeholder="请输入验证码" />
					<view class="getCode" :class="{nClick:'nClick'}">
						<!-- <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
							</u-verification-code> -->
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<!-- <u--text color="#1F1F1F" @click="getCode" :text="tips"></u--text> -->
						<u-button @click="getCode">{{tips}}</u-button>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button class="loginButton" @click="submitForm('form')">立即绑定</button>
		</view>
	</view>
</template>

<script>
	import {
		appLoginCode,login,getUserInfo
	} from '@/common/index.js'
	let phoneReg = '^1\\d{10}$'
	export default {
		data() {
			return {
				checked: [],
				// userInfo: {
				// 	registerForm: "MINI"
				// },
				form: {
					"phonenumber": "",
					"smsCode": "",
					// "hobby": 2,
				},
				nClick: true,
				tips: '获取验证码',
				seconds: 60,
				rules: {
					// 对name字段进行必填验证
					phonenumber: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写手机号',
							},
							{
								pattern: phoneReg,
								errorMessage: '请填写正确手机号',
							}
						],
					},
					smsCode: {
						rules: [{
								required: true,
								errorMessage: '请填写验证码',
							},
							{
								format: 'number',
								errorMessage: '请填写正确验证码',
							}
						],
					}
				},
			};
		},
		onLoad() {
			 let authCode = uni.getStorageSync('authCode')
			 console.log(authCode);
			 this.form.aliSign = authCode
		},
		methods: {
			chooseWx() {
				if (this.checked.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并同意用户协议和隐私政策'
					})
					return
				}
			},
			checkboxChange(e) {},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					let phoneRage = /^1\d{10}$/
					if (this.form.phonenumber == "") {
						uni.showToast({
							icon: 'none',
							title: '请输入手机号'
						})
						return
					}
					console.log(phoneRage.test(this.form.phonenumber));
					if (!phoneRage.test(this.form.phonenumber)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号'
						})
						return
					}
					uni.showLoading({
						title: '正在获取验证码'
					})
					appLoginCode(this.form.phonenumber).then((res) => {
						if (res.code == 500) {
							this.$u.toast(res.msg + "请稍后再试");
							return
						}
						console.log(res);
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submitForm(ref) {
				console.log(this.form);
				this.$refs[ref].validate().then(res => {
					// if (this.checked.length == 0) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '请先勾选同意协议政策后再登录',
					// 	})
					// 	return
					// }
					login(this.form).then((res) => {
						console.log(res);
						if (res.code == 200) {
							res.msg = '绑定成功'
						}
						uni.showToast({
							icon: 'none',
							title: res.msg,
						})
						if (res.code !== 200) {
							return
						}
						let token = res.data.access_token
						uni.setStorageSync('islogin', true)
						uni.setStorage({
							key: 'token',
							data: token,
							success: () => {
								getUserInfo().then((res) => {
									// console.log(res);
									uni.setStorage({
										key: 'userInfo',
										data: res.data,
										success: function() {
											uni.navigateBack()
										}
									})
								})
							}
						});

					})
				}).catch(err => {
					console.log('err', err);
				})

			},
			end() {
				this.nClick = false
			},
			start() {
				this.nClick = true
			},
			gotoView(path) {
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}
	
	.loginButton {
		background: #333333;
		border-radius: 70upx;
		width: 311px;
		// width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		ont-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #FFFFFF;
		margin: 0 auto;
	}

	.form {
		position: relative;
		// top: -200rpx;
	}

	::v-deep .uni-forms {
		box-sizing: border-box;
		padding: 20px 32px;
	}

	::v-deep .uni-forms-item__label {
		width: 60px !important;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 11px !important;
	}

	::v-deep .uni-forms-item__content {
		box-sizing: border-box;
		background: #F4F4F4;
		border-radius: 70upx;
		// overflow: hidden;
		// width: 311px !important;
		// display: flex;
		// align-items: center;
		position: relative;

		.region {
			position: absolute;
			padding-left: 10px;
			padding-right: 10px;
			// border-right: 1px solid #eee;
		}

		.nClick {
			button {
				background-color: unset !important;
				border: unset !important;
				color: #1F1F1F !important;
			}

		}

		.getCode {

			position: absolute;

			top: 50%;
			left: 100%;
			// left: 100%;
			transform: translate(-120%, -50%);
			z-index: 9;

			button {
				background-color: unset;
				border: unset;
				color: #1F1F1F;
				height: 28px;
				width: 70px;
				text-align: center;
				line-height: 28px;
				font-size: 20rpx;
				border-radius: 14px;
				padding: unset;
			}

			button:hover {
				background-color: unset;
				border: unset !important;
				color: #1F1F1F !important;
				height: 28px;
				width: 70px;
				text-align: center;
				line-height: 28px;
				font-size: 20rpx;
				border-radius: 14px;
				padding: unset;
			}

		}

		input {
			height: 48px;
			line-height: 48px;
			padding: 0 10px;
			// text-align: center;
			background-color: #F4F4F4;
		}
	}
</style>